<!-- 弹窗组件 -->
<template>
	<view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popConfig">
				<view><img :src="iconUrl" alt=""></view>
				<view class="popConfig-txt">
					<view class="popConfig-title">{{popName}}</view>
					<view class="popConfig-des">{{popDes}}</view>
				</view>
				<view class="popConfig-btn" v-if="popBtn">
					<button @click="operate">{{popBtn[0].name}}</button>
					<button @click="close">{{popBtn[1].name}}</button>
				</view>
				<view class="popConfig-btn" v-else>
					<button @click="operate">确认</button>
					<button @click="close">取消</button>
				</view>
			</view>
 
		</uni-popup>
	</view>
</template>
 
<script>
export default {
	props: {
		showPop: {
				type: Boolean,
				required: true
			},
			iconUrl: {
				type: String,
				required: true
			},
			popName: {
				type: String,
				required: true
			},
 
			popDes: {
				type: String,
				required: true
			},
			popBtn: {  //	[{name:'确认'},{name:'取消'}]
				type: Array,
				required: false
			}
		},
		data() {
			return {};
		},
		methods: {
			close() {
				
				this.$emit("changeShowPop", false)
			},
			operate(){
				this.$emit("firstBtnOperate","")
			}
		},
		watch: {
			'showPop': {
				handler(newVal, oldVal) {
					// console.log(111)
					if (this.showPop == true) {
						this.$nextTick(() => {
							this.$refs.popup.open()
						})
					} else {
						this.$nextTick(() => {
							this.$refs.popup.close()
						})
					}
				},
				deep: true,
				immediate: true
			}
		},
	}
</script>
 
<style lang="scss" scoped>
	.popConfig {
		background-color: white;
		box-sizing: border-box;
		padding: 50rpx;
		width: 90vw;
		min-height: 600rpx;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
 
		view {
			img {
				margin-top: 30rpx;
				width: 150rpx;
				height: 150rpx;
			}
		}
 
		.popConfig-txt {
			text-align: center;
 
			.popConfig-title {
				font-size: 40rpx;
				color: #3b385aff;
			}
 
			.popConfig-des {
				font-size: 35rpx;
				color: #3b385aff;
			}
		}
 
		.popConfig-btn {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-between;
 
			button {
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #5861d0ff;
				color: white;
				border-radius: 40rpx;
			}
 
			button:nth-last-child(1) {
				background-color: white;
				color: #5861d0;
				border: 2rpx solid #5861d0;
			}
		}
	}
</style>